<template>
  <!-- 国际客户登录 -->
  <div class="bg-[url('../imgs/back.jpg')]  bg-cover bg-center h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md bg-white rounded-lg shadow-lg overflow-hidden">
      <!-- 登录标题 -->
      <div class="bg-blue-600 px-6 py-4">
        <h2 class="text-2xl font-semibold text-white text-center">国际客户登录</h2>
      </div>

      <!-- 登录表单 -->
      <form @submit.prevent="handleLogin" class="px-8 py-6">
        <!-- 账号输入 -->
        <div class="mb-6">
          <label for="account" class="block text-xl font-bold text-gray-700 text-sm font-medium mb-2">请输入账号</label>
          <input
              type="text"
              id="account"
              v-model="loginForm.account"
              @input="validateAccount"
              placeholder="请输入您的账号"
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition uppercase-input"
          />
        </div>

        <!-- 密码输入 -->
        <div class="mb-6">
          <label for="password"
                 class=" text-xl font-bold block text-gray-700 text-sm font-medium mb-2">请输入密码</label>
          <input
              type="password"
              id="password"
              v-model="loginForm.password"
              placeholder="请输入您的密码"
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
          />
        </div>

        <!-- 按钮组 -->
        <div class="flex items-center justify-between mt-8">
          <button
              type="submit"
              class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition"
          >
            登录
          </button>

          <button
              type="button"
              @click="handleReset"
              class="px-6 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition"
          >
            重置
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
import {useRouter} from "vue-router";


const router = useRouter();

const loginForm = ref({
  account: "",
  password: ""
});
const accountError = ref('');
const handleReset = () => {
  //
  loginForm.value = {
    account: "",
    password: ""
  }
}

const validateAccount = () => {
  if (loginForm.value.account  && !loginForm.value.account.toUpperCase().startsWith('C'))  {
    accountError.value  = '这里是国际客户登陆的入口, 你不是国际客户!';
  } else {
    accountError.value  = '';
  }
};


const handleLogin = () => {
  // 账号不能为空
  if (!loginForm.value.account) {
    ElMessageBox.alert('请输入你的账号!', {
      type: "error",
      confirmButtonText: "确认",
      customClass: "my-custom-error",
    });
    return;
  }

  if (!loginForm.value.password) {
    ElMessageBox.alert('请输入你的密码，密码不能为空!', {
      type: "error",
      confirmButtonText: "确认",
      customClass: "my-custom-error",
    });
    return;
  }

  validateAccount();
  if (accountError.value) {
    ElMessageBox.alert(accountError.value, {
      type: "error",
      confirmButtonText: "确认",
      customClass: "my-custom-error",
    });
    return;
  }


  axios.post('http://localhost:8101/login/checkInfo', loginForm.value).then(function (res){
    if (res.data.code === 200) {
      ElMessage.success("登陆成功，正在跳转!")
      router.push({
        name: 'index',
        query: {
          staffId: loginForm.value.account
        }
      })
    }  else {
      ElMessageBox.alert(res.data.msg, {
        type: "error",
        confirmButtonText: "确认",
        customClass: "my-custom-error",
      });
    }
  })
}

</script>
<style scoped>
/* 强制显示大写（视觉上） */
.uppercase-input {
  text-transform: uppercase;
}
</style>